<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table{
      margin: 60px auto;
    }
    td,th{
      border:1px solid gray ;

    }
  </style>
  <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
<h3>学生信息</h3>
<button>新增学生</button>
<table style="width: 500px;">
  <thead>
  <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>密码</th>
    <th>家庭住址</th>
    <th>联系方式</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody id="stuContent">

  </tbody>

</table>
</body>
<script>
  $(function(){
    getUserList();
  })
  function getUserList(){

    $.ajax({
      url:"/getUserInfoes",
      type:'GET',
      responseType:'json',
      success:function (res){
        var htmlstr="";
        //JSON.parse 将json字符串转化为对象
        let list=JSON.parse(res)
        /*
        ()=>{}
        function(){
        }
         */
        list.forEach(userInfo=>{
          htmlstr+=`
                          <tr>
                                <td>${userInfo.id}</td>
                                <td>${userInfo.username}</td>
                                <td>${userInfo.userpwd}</td>
                                <td>${userInfo.useraddress}</td>
                                <td>${userInfo.usertel}</td>
                                <td>
                                <button><a href="">编辑</a></button>
                                 <button><a href="">删除</a></button>
                                </td>
                            </tr>
                        `
        })
        $("#stuContent").html(htmlstr)
      },
      error:function(err){
        console.error(err)
      }

    })
  }
</script>
</html>